<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>带标域的线图</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode" style="position: relative;">
  </canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
 var data = [
    { x: '分类一', y: 30 },
    { x: '分类二', y: 48 },
    { x: '分类三', y: 59 },
    { x: '分类四', y: 125 },
    { x: '分类五', y: 85 },
    { x: '分类六', y: 70 },
    { x: '分类七', y: 56 },
    { x: '分类八', y: 34 },
  ];
  var chart = new F2.Chart({
    id: 'mountNode',
    width: window.innerWidth,
    height: window.innerWidth > window.innerHeight ? (window.innerHeight - 54) : window.innerWidth * 0.707,
    pixelRatio: window.devicePixelRatio
  });
  chart.source(data, {
    y: {
      tickCount: 5
    }
  });
  chart.interval().position('x*y');

  chart.guide()
    .regionFilter({
      start: [ 'min', 95 ],
      end: [ 'max', 'max' ],
      color: '#FF4D4F'
    });
  chart.guide().line({
      start: [ 'min', 95 ],
      end: [ 'max', 95 ],
      style: {
        stroke: '#FF4D4F',
        lineDash: [ 2 ]
      }
    });
  chart.guide().text({
      position: [ 'max', 95 ],
      content: '预警值： 95',
      offsetY: -5,
      style: {
        fill: '#FF4D4F',
        textAlign: 'end',
        textBaseline: 'bottom'
      }
    });

  chart.render();
</script>
</body>
</html>
